<!--
orders_status   订单状态 1待支付 2信息未填写 3解答中 4解答完成 5已取消 6追问回答完成
orders_pay_status 支付状态 1待支付 2已支付 3已退款
-->
<template>
  <div id="page-orderInfo">
    <top-header title="订单详情"> </top-header>
    <!-- 顶部banner栏 -->
    <div class="banner" >
      <img src="static/image/orderInfo/orderbanner.png" alt="orderBanner" />
      <div v-if="order_info">
        <div v-if="order_info.status == 1 ">
          <p class="title">待付款</p>
          <p class="info">请在<count-time :unix-time='unixTime' :isAll="3" :minutes-type = "minutesType" @over='timeover' class="setTime"></count-time>秒内完成支付</p>
        </div>
        <div v-if="order_info.status == 2">
          <p class="title">信息未填写</p>
          <p class="info">请尽快填写信息哦</p>
        </div>
        <div v-if="order_info.status==3">
          <p class="title">解答中</p>
          <p class="info">老师正在解答中，请耐心等待</p>
        </div>
        <div v-else-if="order_info.status == 4">
          <p class="title">已解答</p>
          <p class="info">您咨询的问题已解答</p>
        </div>
        <div v-else-if="order_info.status == 5">
          <p class="title">已解答-已退款</p>
          <p class="info">预计会在1-5个工作日之内，进行退还</p>
        </div>
        <div v-else-if="order_info.status == 6">
          <p class="title">已取消</p>
          <p class="info">取消原因：{{order_info.action_desc}}</p>
        </div>
        <div v-else-if="order_info.status == 7">
          <p class="title">已取消-已退款</p>
          <p class="info">预计会在1-5个工作日之内，进行退还</p>
        </div>       
      </div>
      
    </div>

    <!-- 咨询项目栏 -->
    <div class="order" v-if="order_info">
      <p class="advisory">咨询项目：{{order_info.type_name}}</p>
      <div class="master">
        <img :src="order_info.thumb_img" alt="masterThumb" />
        <div class="master-order">
          <div class="master-info" @click="toCertainMaster(order_info.mid)">
            <p>解答老师：{{order_info.master_name}}</p>
            <img src="static/image/orderInfo/more.png" alt="more" />
          </div>
          <div class="fee">
            <p class="real-fee">¥{{order_info.orders_fee}}</p>
            <div class="activity" v-if="order_info.r_price>0">
              <img src="static/image/orderInfo/new_user.png" alt="activity" />
              <p class="discount">
                新客立减：
                <span>- ¥ {{order_info.r_price}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="question" v-if="questionSupplement">
        <p>
          问题补充：
          <span>{{order_info.orders_remarks}}</span>
        </p>
      </div>
      <div class="question-supplement" v-else-if="order_info.orders_status != 5 && order_info.orders_pay_status==2">
        <p>
          问题补充：未补充
        </p>
        <div class="fillin" @click = "fillInQuestion()">
          <p>立即填写</p>
          <img src="static/image/orderInfo/right.png" alt="立即填写">
        </div>    
      </div>
    </div>

    <!-- 咨询者信息 -->
    <div v-if = "order_info.status == 2">
      <div class="consultant">
        <p>咨询者信息</p>
        <div class="info-btn" @click="fillInQuestion()">
          <p>立即填写</p>
        </div>
      </div>
    </div>
    <div v-else-if="order_info.status>2 && order_info.status!=6">
      <div class="user" v-if="user_info">
        <p class="user-title">咨询者信息</p>
        <div class="user-info">
          <p>
            <span>姓 名</span>：{{user_info.name}}
          </p>
          <p>
            <span>性 别</span>：{{gender}}
          </p>
          <p>
            <span>阳历生日</span>：{{user_info.gregorian}}
          </p>
          <p>
            <span>阴历生日</span>：{{user_info.lunar}}
          </p>
          <p>
            <span>真太阳时</span>：{{user_info.taiyanshi}}
          </p>
          <p>
            <span>出生地点</span>：{{user_info.address}}
          </p>
        </div>
      </div>
    </div>
    <!-- 解答信息 -->
    <div v-if="order_info.orders_pay_status == 2">
      <div class="answer" v-if="order_info.orders_status == 4 ||order_info.orders_status == 6 " >
        <div class="answer-title">解答内容（您的命盘）</div>
        <table class="answer-table" v-if="user_info">
          <thead>
            <tr class="bgc">
              <th></th>
              <th>年柱</th>
              <th>月柱</th>
              <th>日柱</th>
              <th>时柱</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="bgc">十神</td>
              <td>{{user_info.shishen_year}}</td>
              <td>{{user_info.shishen_month}}</td>
              <td>{{user_info.shishen_day}}</td>
              <td>{{user_info.shishen_shi}}</td>
            </tr>
            <tr>
              <td class="bgc">天干</td>
              <td>{{user_info.gan_year}}</td>
              <td>{{user_info.gan_month}}</td>
              <td>{{user_info.gan_day}}</td>
              <td>{{user_info.gan_shi}}</td>
            </tr>
            <tr>
              <td class="bgc">地支</td>
              <td>{{user_info.zhi_year}}</td>
              <td>{{user_info.zhi_month}}</td>
              <td>{{user_info.zhi_day}}</td>
              <td>{{user_info.zhi_shi}}</td>
            </tr>
            <tr>
              <td class="bgc" rowspan="3">藏干</td>
              <td>{{user_info.cangan_year[0]}}</td>
              <td>{{user_info.cangan_month[0]}}</td>
              <td>{{user_info.cangan_day[0]}}</td>
              <td>{{user_info.cangan_shi[0]}}</td>
            </tr>
            <tr>
              <td>{{user_info.cangan_year[1]}}</td>
              <td>{{user_info.cangan_month[1]}}</td>
              <td>{{user_info.cangan_day[1]}}</td>
              <td>{{user_info.cangan_shi[1]}}</td>
            </tr>
            <tr>
            <td>{{user_info.cangan_year[2]}}</td>
              <td>{{user_info.cangan_month[2]}}</td>
              <td>{{user_info.cangan_day[2]}}</td>
              <td>{{user_info.cangan_shi[2]}}</td>
            </tr>
            <tr>
              <td class="bgc" rowspan="3">支神</td>
              <td>{{user_info.zhishen_year[0]}}</td>
              <td>{{user_info.zhishen_month[0]}}</td>
              <td>{{user_info.zhishen_day[0]}}</td>
              <td>{{user_info.zhishen_shi[0]}}</td>
            </tr>
            <tr>
              <td>{{user_info.zhishen_year[1]}}</td>
              <td>{{user_info.zhishen_month[1]}}</td>
              <td>{{user_info.zhishen_day[1]}}</td>
              <td>{{user_info.zhishen_shi[1]}}</td>
            </tr>
            <tr>
            <td>{{user_info.zhishen_year[2]}}</td>
              <td>{{user_info.zhishen_month[2]}}</td>
              <td>{{user_info.zhishen_day[2]}}</td>
              <td>{{user_info.zhishen_shi[2]}}</td>
            </tr>
            <tr>
              <td class="bgc">纳音</td>
              <td>{{user_info.nayin_year}}</td>
              <td>{{user_info.nayin_month}}</td>
              <td>{{user_info.nayin_day}}</td>
              <td>{{user_info.nayin_shi}}</td>
            </tr>
            <!-- <tr>
              <td class="bgc">长生</td>
              <td>病</td>
              <td>沐浴</td>
              <td>养</td>
              <td>病</td>
            </tr> -->
            <tr>
              <td class="bgc">空亡</td>
              <td>{{user_info.kongwang}}</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td class="bgc">神煞</td>
              <td colspan="4" class="last"> <span v-html="user_info.shensha" style="text-align:center"></span></td>
            </tr>
          </tbody>
        </table>
        <div v-if="order_info.question_answer">
          <div class="answer-bzfx"  v-for="(item,index) in order_info.question_answer" :key="index">
            <p class="title">{{item.titile}}</p>
            <p>{{item.content}}</p>
          </div>
        </div>
        <div v-if="order_info.comment_content">
          <div class="answer-bzfx">
            <p>{{order_info.comment_content}}</p>
          </div>
        </div>
        <!-- 追问解答 -->
        <div class="add-answer" v-if="addQuestion.length !=0 " >
          <div v-for="(item,index) in addQuestion" :key="index">
            <div class="ask-btn">
              追问{{index+1}}
            </div>
            <p class="ask">{{item.question}}</p>
            <div class="master-img">
              <img :src="order_info.thumb_img" alt="询问大师">
              <p>{{order_info.master_name}}</p>
            </div>
            <div class="answer-bubble">
              <p>{{item.answer||'老师正在解答中，请耐心等待'}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
   
    <!-- 退款信息 -->
    <div class="refund" v-if="order_info.orders_pay_status == 3" :class="{changeRefundTop:changeRefundTop}">
      <div class="refund-info">
        <div>
          <span>退款原因：</span>  <span>{{order_info.liyou}}</span> 
        </div>
        <div>
          <span>退款金额：</span> <span class="refund-fee">￥{{order_info.orders_refund_money}}</span>
        </div>
        <div v-if="order_info.orders_paytype == 1">
          <span>退款渠道：</span> <p>微信<span>（退款至原支付账户）</span></p>
        </div>
        <div v-else>
          <span>退款渠道：</span> <p>支付宝<span>（退款至原支付账户）</span></p>
        </div>
      </div>
    </div>
    <!-- 下单信息栏 -->
    <div class="order-time "  :class="{ changeTop: isChangeTop, changeBottom: isChangeBottom}" >
      <div class="time">
        <p>
          <span>订单号码</span>：{{orderCode}}
        </p>
        <p>
          <span>下单时间</span>：{{order_info.orders_createtime}}
        </p>
        <p v-if="order_info.orders_paytime">
          <span>支付时间</span>：{{order_info.orders_paytime}}
        </p>
      </div>
      <div class="order-copy" :data-clipboard-text='orderCode' @click="copy_order()">
        <p>复制</p>
      </div>
    </div>

    <!-- 取消订单或立即支付栏 -->
    <div class="cancel-gopay" v-if=" order_info.orders_status == 1">
      <div class="cancel" @click="cancelOrder('用户取消')">
        <p>取消订单</p>
      </div>
      <div class="gopay" @click="goPay">
        <p>立即支付</p>
      </div>
    </div>
    
    <!-- 追问打赏评价栏 -->
    <div v-if="order_info.orders_pay_status == 2">
      <div class="rating" v-if="order_info.orders_status  == 4 || order_info.orders_status  == 6">
        <div class="ratingImg">
          <div class="satisfied">
            <div v-if="iconNumber == 0 || order_info.satisfaction ==1">
              <img  src="../../../static/image/orderInfo/satisfied_selected.png" alt="满意图选中">
              <p class="selected">满意</p>
            </div>
            <div v-else-if="iconNumber==undefined "  @click=" showComments = !showComments ">
              <img src="../../../static/image/orderInfo/satisfied.png" alt="满意图">
              <p>满意</p>
            </div>
            <div v-else>
              <img src="../../../static/image/orderInfo/satisfied.png" alt="满意图">
              <p>满意</p>
            </div>
          </div>
          <div class="general"  >
            <div v-if="iconNumber == 1 || order_info.satisfaction ==2" >
              <img src="../../../static/image/orderInfo/general_selected.png" alt="一般图选中">
              <p class="selected">一般</p>
            </div>
            <div v-else-if="iconNumber == undefined" @click="showComments = !showComments">
              <img src="../../../static/image/orderInfo/general.png" alt="一般图">
              <p>一般</p>
            </div>
            <div v-else>
              <img src="../../../static/image/orderInfo/general.png" alt="一般图">
              <p>一般</p>
            </div>
          </div>
          <div class="dissatisfied" >
            <div v-if="iconNumber == 2 || order_info.satisfaction ==3">
              <img src="../../../static/image/orderInfo/dissatisfied_selected.png" alt="一般图选中">
              <p class="selected">不满意</p>
            </div>
            <div v-else-if="iconNumber == undefined" @click="showComments = !showComments">
              <img src="../../../static/image/orderInfo/dissatisfied.png" alt="一般图">
              <p>不满意</p>
            </div>
            <div v-else>
              <img src="../../../static/image/orderInfo/dissatisfied.png" alt="一般图">
              <p>不满意</p>
            </div>
          </div>
        </div>
        <div class="button" >
          <div class="add-question" v-if="question.askNum>0" @click="change()">
            <p >追问</p>
          </div>
          <div class="more-order" v-else  @click = "toMaster" >
            <p>再下一单</p>
          </div>
          <div class="reward" @click ="rewardTeacher.showStatus = !rewardTeacher.showStatus" style="display:none">
            <p>打赏</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 再次下单或重新咨询的底部按钮 -->
    <div class="more-query" v-if="order_info.orders_status == 5 || order_info.orders_pay_status == 3" @click = "toMaster()" >
      <p v-if="order_info.orders_status == 4||order_info.orders_status == 6">再下一单</p>
      <p v-else>重新向大师咨询</p>
    </div>
    <!-- 打赏弹出组件 -->
    <give-reward  :show-status='rewardTeacher.showStatus' :teacherHead='rewardTeacher.img' :teacherName = 'rewardTeacher.name' @changeStatus='rewardTeacher.showStatus=$event' :payType="ordersPaytype" :orderCode="orderCode"/>
    <!-- 用户评价组件 -->
    <user-comment :show-status='showComments' @changeStatus='showComments=$event' @selectIcon="selectIcon" v-model="question.askNum" :orderCode='orderCode' :mid="mid"/>

    <!-- 追问组件 -->
    <add-question :show-status = 'question.showStatus' v-model = 'question.askNum'  @changeStatus = 'question.showStatus = $event' :orderCode='orderCode' :mid="mid" ></add-question>
  </div>
</template>
<script>
import topHeader from '@/components/topHeader'//引入顶部导航栏
import giveReward from '@/components/giveReward' //引入打赏组件
import tool from '@/assets/js/tool' // 引入公共函数
import userComment from '@/components/userComment' //引入用户评价组件
import countTime from '@/components/countTime'// 引入倒计时组件
import addQuestion from '@/components/addQuestion' // 引入追问组件
import { setTimeout } from 'timers';
export default {
  name: "orderInfo",
  data() {
    return {
      questionSupplement: false,// 问题补充
      addQuestion: [],//追问
      iconNumber: undefined,// 评价图标
      changeRefundTop:false,// 是否设置退款原因上边距
      isChangeTop: false,//是否设置下单信息栏的上边距
      isChangeBottom: false, // 是否设置下单信息栏的下边距
      showComments: false,// 是否显示用户评论
      refundQD: false, // 退款渠道
      ordersPaytype: undefined, //支付渠道 默认微信
      unixTime: '',// 支付时间倒计时
      minutesType: '分', // 支付倒数计时分秒之间的样式
      rewardTeacher:{
        showStatus: false,// 设置打赏组件的状态
        img: undefined,//打赏大师头像
        name: undefined// 打赏大师姓名
      },
      question:{// 设置追问组件状态
        showStatus: false,
        askNum: 2
      },
      orderCode: '',
      order_info: false,
      user_info: false,
      gender: false,  
      mid: undefined,  // 当前大师id
    };
  },
  components:{
    topHeader,
    giveReward,
    userComment,
    countTime,
    addQuestion
  },
  created() { 
    this.fetchOrder()
    this.$store.commit('changePageLoading',true);
  },
  methods: {
    // 倒计时结束函数
    timeover(){
      this.cancelOrder('支付超时')
    },
    // 改变追问信息
    change(){
      this.question.showStatus = ! this.question.showStatus
    },
    // 调取订单接口
    fetchOrder(){
      this.orderCode = this.$route.query.orderCode
      // this.orderCode = 'BYICE723732859753326'
      // this.orderCode = 'BYICE620238720218210'
      this.$fetch.post('/app/Jmyc/user_order_detail',{
        ordercode: this.orderCode
      }).then(res=>{
        this.$store.commit('changePageLoading',false);
        if(res.code == 200){
          this.order_info = res.data.order_info
          this.order_info.thumb_img = tool.imgUrl(this.order_info.thumb_img,true)
          this.addQuestion = this.order_info.ask?this.order_info.ask:[],
          this.rewardTeacher.img = this.order_info.thumb_img
          this.rewardTeacher.name = this.order_info.master_name
          this.questionSupplement = this.order_info.orders_remarks?this.order_info.orders_remarks:false
          this.ordersPaytype = this.order_info.orders_paytype||1
          this.question.askNum = 2-this.addQuestion.length
          this.unixTime = this.getUnixTime(this.order_info.orders_createtime)
          this.iconNumber = this.order_info.satisfaction?this.order_info.satisfaction-1:undefined
          // this.unixTime = String(Math.round(Date.now()/1000))
          this.mid = this.order_info.mid
          //判断下单信息栏的上边距
          // this.isChangeTop = this.status == 6 || this.status == 1? true : false;
          this.isChangeTop = this.order_info.orders_status == 1||this.order_info.orders_pay_status==1? true : false
          // 判断下单信息栏的下边距
          this.isChangeBottom = (this.order_info.orders_status ==4 ||this.order_info.orders_status ==6)&&this.order_info.orders_pay_status == 2?true:false
          // 判断退款信息栏的上边距
          this.changeRefundTop = this.order_info.orders_status == 2 && this.order_info.orders_pay_status ==3?true:false
          if(res.data.user_info){
            this.user_info = res.data.user_info
            this.gender = this.user_info.sex == 1?'男':'女'
            this.user_info.shensha = this.user_info.shensha?this.user_info.shensha.replace(/、/g,'&emsp;'):false
          }
          console.log('订单信息',this.order_info)
          console.log('用户信息',this.user_info)
        }
      })
    },
    // 复制订单号
    copy_order() {
      tool.copyContent(this,'.order-copy')
    },
    // 跳转大师页面
    toMaster(){
      this.$router.push('/askTeacher?isMiddlePage=1')
    },
    // 跳转特定大师页面
    toCertainMaster(mid){
      this.$router.push(`/teacherDetail?mid=${mid}`)
    },
    // 填写问题补充
    fillInQuestion() {
      let param={
        ordercode: this.orderCode,
        mid: this.mid
      }
      this.$router.push({path:'/editUserInfo',query:param})
    },
    // 获得支付时倒计时
    getUnixTime(create_time) {
      let time = Math.round(new Date(create_time).getTime()/1000)
      return time
    },
    // 取消订单栏
    cancelOrder(remark){
      var remark = remark
      this.$fetch.post('/v1/Order/cancelOrder',{
        ordercode: this.orderCode,
        remark:remark
      }).then(res=>{
        //toast公共配置
        var totalConfig = {
          type: "text",
          text: "",
          position: "top",
          time: 1500
        };
        if (res.code == 1) {
          totalConfig.text = "取消成功";
        } else {
          totalConfig.text = "取消失败，请稍后重试";
        }
        this.$vux.toast.show(totalConfig);
        setTimeout(function(){
          window.location.reload()
        },1500)
      });
    },
    //跳转支付
    goPay(){
       let param={
        ordercode: this.orderCode
      }
      this.$router.push({path:'/confirmOrder',query:param})
    },
    // 选择评论图标
    selectIcon(val) {
      if(this.question.askNum>0 && val==2){
        return
      }
      this.iconNumber = val
    },
  }
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>